import React from 'react';
import { Space, Switch, Typography, Collapse } from 'antd';
import { types, codes, codeMap } from './configs';
import styles from '../styles/index.less';

const IconCard: React.FC<any> = ({
  status,
  onSwitch,
  selected,
  setSelected,
  selectedChild,
  setSelectedChild,
}) => {
  const handleChange = (checked: boolean, value: string) => {
    if (checked) {
      setSelectedChild([]);
      setSelected([...selected, value]);
    } else {
      setSelected(selected.filter(item => item !== value));
    }
    onSwitch(value, checked, true);
  };

  const handleChildChange = (checked: boolean, value: string) => {
    if (checked) {
      setSelected([]);
      setSelectedChild([...selectedChild, value]);
    } else {
      setSelectedChild(selectedChild.filter(item => item !== value));
    }
    onSwitch(value, checked, false);
  };

  return (
    <div
      className={styles.icon_card}
      style={{ display: status ? 'block' : 'none', overflow: 'auto', maxHeight: 240 }}
    >
      <Collapse className={styles.list} ghost>
        {types.map((code, index) => (
          <Collapse.Panel
            style={{ padding: '6px 0' }}
            header={
              <div className={styles.list_item}>
                <Space size={8}>
                  <img src={`/map/type/1${index}.png`} alt="" />
                  <Typography.Text style={{ fontSize: 12 }}>{code}</Typography.Text>
                </Space>
                <Switch
                  checked={selected.includes(code)}
                  size="small"
                  onClick={(_, e) => e.stopPropagation()}
                  onChange={checked => handleChange(checked, code)}
                />
              </div>
            }
            key={index}
          >
            <ul className={styles.list}>
              {codeMap[index].map(code => (
                <li style={{ padding: '4px 6px' }} className={styles.list_item} key={code}>
                  <Space size={8}>
                    <img src={`/map/${code}.png`} alt="" />
                    <Typography.Text style={{ fontSize: 12 }}>{codes[code]}</Typography.Text>
                  </Space>
                  <Switch
                    size="small"
                    checked={selectedChild.includes(codes[code])}
                    onChange={checked => handleChildChange(checked, codes[code])}
                  />
                </li>
              ))}
            </ul>
          </Collapse.Panel>
        ))}
      </Collapse>

      {/* <ul style={{ maxHeight: 200, marginTop: 12 }} className={styles.list}>
        {types.map((code, index) => (
          <li className={styles.list_item} key={code}>
            <Space size={8}>
              <img src={`/map/0${index}.png`} alt="" />
              <Typography.Text style={{ fontSize: 12 }}>{code}</Typography.Text>
            </Space>
            <Switch size="small" />
          </li>
        ))}
      </ul> */}
    </div>
  );
};

export default IconCard;
